<template>
  <div class="min-h-screen bg-base-100">
    <div class="blog-container">
      <h1 class="text-3xl font-bold mb-8">设置</h1>
      
      <div class="card bg-base-100 shadow-xl border border-base-200 mb-8">
        <div class="card-body">
          <h2 class="card-title mb-6">界面设置</h2>
          
          <!-- 主题选择 -->
          <div class="form-control mb-6">
            <label class="label">
              <span class="label-text font-bold">主题</span>
            </label>
            <div class="grid grid-cols-3 md:grid-cols-6 gap-3">
              <div 
                v-for="theme in availableThemes" 
                :key="theme"
                @click="setTheme(theme)"
                class="theme-item cursor-pointer rounded-lg p-4 flex flex-col items-center border"
                :class="{ 'border-primary': currentTheme === theme, 'border-base-300': currentTheme !== theme }">
                <div class="theme-preview w-full aspect-square rounded-md mb-2" :data-theme="theme">
                  <div class="w-full h-full grid grid-cols-3 grid-rows-3 p-1 gap-1">
                    <div class="bg-primary rounded"></div>
                    <div class="bg-secondary rounded"></div>
                    <div class="bg-accent rounded"></div>
                    <div class="bg-neutral rounded"></div>
                    <div class="bg-base-300 rounded col-span-2"></div>
                  </div>
                </div>
                <span class="text-sm">{{ theme }}</span>
              </div>
            </div>
          </div>
          
          <!-- 字体大小 -->
          <div class="form-control mb-6">
            <label class="label">
              <span class="label-text font-bold">字体大小</span>
              <span class="label-text-alt">{{ fontSize }}px</span>
            </label>
            <input 
              type="range" 
              min="12" 
              max="24" 
              v-model.number="fontSize" 
              class="range range-primary" />
            <div class="w-full flex justify-between text-xs px-2">
              <span>12px</span>
              <span>16px</span>
              <span>20px</span>
              <span>24px</span>
            </div>
          </div>
          
          <!-- 语言设置 -->
          <div class="form-control mb-6">
            <label class="label">
              <span class="label-text font-bold">语言</span>
            </label>
            <select v-model="language" class="select select-bordered w-full">
              <option value="zh-CN">简体中文</option>
              <option value="en-US">English</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="card bg-base-100 shadow-xl border border-base-200 mb-8">
        <div class="card-body">
          <h2 class="card-title mb-6">编辑器设置</h2>
          
          <!-- 默认编辑器 -->
          <div class="form-control mb-6">
            <label class="label">
              <span class="label-text font-bold">默认编辑器</span>
            </label>
            <div class="flex gap-4">
              <div class="form-control">
                <label class="label cursor-pointer">
                  <input 
                    type="radio" 
                    name="editor-type" 
                    class="radio radio-primary" 
                    :value="'markdown'" 
                    v-model="editorType" />
                  <span class="label-text ml-2">Markdown</span>
                </label>
              </div>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <input 
                    type="radio" 
                    name="editor-type" 
                    class="radio radio-primary" 
                    :value="'richtext'" 
                    v-model="editorType" />
                  <span class="label-text ml-2">富文本编辑器</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body">
          <h2 class="card-title mb-6">应用信息</h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h3 class="font-bold mb-3">关于</h3>
              <p class="mb-2">Vue博客系统 v1.0.0</p>
              <p class="mb-4">一个使用 Vue 3 和 TypeScript 构建的博客系统</p>
              <div class="flex space-x-2">
                <a href="https://github.com" target="_blank" class="btn btn-outline btn-sm">
                  <icon-simple-icons-github class="w-4 h-4 mr-1" />
                  GitHub
                </a>
                <a href="https://vuejs.org" target="_blank" class="btn btn-outline btn-sm">
                  <icon-heroicons-arrow-top-right-on-square class="w-4 h-4 mr-1" />
                  Vue.js
                </a>
              </div>
            </div>
            
            <div>
              <h3 class="font-bold mb-3">技术栈</h3>
              <ul class="space-y-1 ml-4 list-disc">
                <li>Vue 3</li>
                <li>TypeScript</li>
                <li>Pinia</li>
                <li>Vue Router</li>
                <li>TailwindCSS</li>
                <li>DaisyUI</li>
              </ul>
            </div>
          </div>
          
          <div class="divider my-6"></div>
          
          <div class="flex justify-between items-center">
            <button @click="resetSettings" class="btn btn-outline btn-error">
              重置所有设置
            </button>
            <button @click="saveSettings" class="btn btn-primary">
              保存设置
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useSettingsStore } from '@/stores/settingsStore';
import type { EditorType } from '@/types';

const settingsStore = useSettingsStore();

// 可用主题
const availableThemes = [
  'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate'
];

// 设置数据
const currentTheme = ref(settingsStore.theme);
const fontSize = ref(settingsStore.fontSize);
const language = ref(settingsStore.language);
const editorType = ref(settingsStore.editorType);

// 监听主题变化，立即应用
watch(currentTheme, (newTheme) => {
  document.documentElement.setAttribute('data-theme', newTheme);
});

// 初始化设置
onMounted(() => {
  // 确保主题设置已应用
  document.documentElement.setAttribute('data-theme', currentTheme.value);
  
  // 应用字体大小
  document.documentElement.style.fontSize = `${fontSize.value}px`;
});

// 设置主题
const setTheme = (theme: string) => {
  currentTheme.value = theme;
};

// 重置所有设置
const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？这将恢复到默认值。')) {
    currentTheme.value = 'light';
    fontSize.value = 16;
    language.value = 'zh-CN';
    editorType.value = 'markdown';
    
    saveSettings();
  }
};

// 保存设置
const saveSettings = () => {
  // 更新存储
  settingsStore.setTheme(currentTheme.value);
  settingsStore.setFontSize(fontSize.value);
  settingsStore.setLanguage(language.value);
  settingsStore.setEditorType(editorType.value as EditorType);
  
  // 应用字体大小
  document.documentElement.style.fontSize = `${fontSize.value}px`;
  
  alert('设置已保存');
};
</script>

<style scoped>
.theme-preview {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.range-primary{
  width: 100%;
  margin: 10px 0 10px 0;
}
.label{
  margin-bottom: 10px;
}
</style> 